<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layouts/layout">
<head>
</head>
<body>
<div layout:fragment="content">
    <div class="panel panel-flat">
        <div class="panel-body">
            <form class="form-horizontal" action="#" id="edit-rolling-image" enctype="multipart/form-data">
                <fieldset class="content-group">
                    <div class="form-group">
                        <div class="col-lg-3 text-center"  th:each="rollingImage:${rollingImages}">
                            <button type="button" onclick="clearFile(this);" class="bg-danger text-highlight heading-text auth-flag" style="display: inline-block;">删除</button>
                            <div style="height: 250px; margin-top: 20px">
                                <a class="img_icon" href="javascript:;"
                                   onclick="showImageSelector(this);" aspect-ratio="1"
                                   data-save-func="saveTemplateImage" attr-name="edit_feed_smallImg">
                                    <img th:if="${rollingImage.imageStore == null}" th:src="@{/images/upload-select-bg.jpg}" alt="" style="max-width: 200px; max-height: 200px;"/>
                                    <img th:if="${rollingImage.imageStore != null}" th:src="@{/showImage(id=${rollingImage.imageStore.id})}" alt="" style="max-width: 200px; max-height: 200px;"/>
                                </a>
                                <input type="file" onchange="changeImageUrl(this);" name="courseImageFile"
                                       style="left:-9999px;position:absolute;"/>
                                <input type="hidden" th:if="${rollingImage.imageStore != null}" th:value="${rollingImage.imageStore.id}" name="imageStoreId"/>
                                <input type="hidden" th:if="${rollingImage.imageStore == null}" value="" name="imageStoreId"/>
                                <input type="hidden" th:value="${rollingImage.id}" name="rollingImageId"/>

                            </div>

                        </div>
                    </div>
                </fieldset>
                <div class="text-right" style="margin-top: -80px;">
                    <button type="button" onclick="saveRollingImages();" class="btn btn-primary">提交<i class="icon-arrow-right14 position-right"></i></button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /page content -->
</body>
</html>
<script  th:inline="javascript">
    function showImageSelector(obj) {
        $(obj).next().trigger("click");
    }

    function changeImageUrl(obj) {
        if ($(obj).val() != "") {
            $(obj).next("input[name=imageStoreId]").val("");
            var url = window.URL.createObjectURL(obj.files[0])
            $(obj).prev().find("img").attr("src", url)
        }
    }
    
    function clearFile(obj) {
        var file = $(obj).next().find("input[type=file]");
        file.after(file.clone().val(""));
        file.remove();
        /*<![CDATA[*/
        var context = [[@{/}]];
            /*]]>*/
        $(obj).next().find("img").attr("src", context+"images/upload-select-bg.jpg");
        $(obj).next().find("input[name=imageStoreId]").val("");

    }

    function saveRollingImages() {
        var formData = new FormData($("#edit-rolling-image")[0]);
        $.ajax({
            url: '/management_system/saveRollingImages',
            type: 'POST',
            data: formData,
            dataType: 'JSON',
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if(data.code == 0){
                    showSuccessMessage("保存成功！");
                }else{
                    showErrorMessage("保存出错！");
                }

            },
            error: function (error) {
                console.log(error);
                showErrorMessage("保存出错！");
            }
        });

    }

</script>
